<template>
  <view
    class="grace-box-banner gui-flex gui-rows gui-nowrap"
    :class="customClass"
    :style="{
      paddingTop: padding,
      paddingBottom: padding,
      borderRadius: borderRadius,
    }"
  >
    <view
      v-for="(item, index) in items"
      :key="index"
      class="grace-box-items gui-flex gui-rows gui-nowrap gui-align-items-center"
      hover-class="gui-tap"
      @tap.stop="taped(item)"
    >
      <view class="gui-flex1">
        <slot :index="index" :row="item">
          <view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-align-items-center">
            <text
              class="gui-block"
              :class="colors[0]"
              :style="{
                lineHeight: lineHeight,
                fontSize: fontSize[0],
              }"
            >
              {{ item[0] }}
            </text>
            <text
              class="gui-block"
              :class="colors[1]"
              :style="{
                fontSize: fontSize[1],
                marginLeft: '5rpx',
              }"
            >
              {{ item[1] }}
            </text>
          </view>
          <text
            class="gui-block gui-text-center"
            :class="colors[2]"
            :style="{
              fontSize: fontSize[2],
            }"
          >
            {{ item[2] }}
          </text>
        </slot>
      </view>
      <view
        v-if="index < items.length - 1 && line"
        class="grace-box-line"
        :style="{
          height: borderHeight,
          'border-right-width': borderWidth,
          'border-right-style': borderStyle,
          'border-right-color': borderColor,
        }"
      />
    </view>
  </view>
</template>
<script>
export default {
  name: 'GuiBoxBanner',
  props: {
    items: {
      type: Array,
      default: function () {
        return []
      },
    },
    colors: {
      type: Array,
      default: function () {
        return [['gui-primary-text'], ['gui-color-gray'], ['gui-color-gray']]
      },
    },
    fontSize: {
      type: Array,
      default: function () {
        return ['36rpx', '24rpx', '24rpx']
      },
    },
    customClass: {
      type: Array,
      default: function () {
        return ['gui-bg-white', 'gui-dark-bg-level-3']
      },
    },
    padding: {
      type: String,
      default: '20rpx',
    },
    borderRadius: {
      type: String,
      default: '10rpx',
    },
    line: {
      type: Boolean,
      default: true,
    },
    lineHeight: {
      type: String,
      default: '60rpx',
    },
    borderColor: { type: String, default: '#F1F1F1' },
    borderWidth: { type: String, default: '1px' },
    borderStyle: { type: String, default: 'solid' },
    borderHeight: { type: String, default: '60rpx' },
  },
  emits: ['taped'],
  methods: {
    taped: function (index) {
      this.$emit('taped', index)
    },
  },
}
</script>
<style scoped>
.grace-box-banner {
  overflow: hidden;
}
.grace-box-items {
  width: 100rpx;
  flex: 1;
}
.grace-box-line {
  width: 1px;
  height: 50rpx;
}
</style>
